<template>
  <div class="home" style="height: 100%">
    <el-container style="height: 100%">
      <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246);height: 100%">
        <Aside :is-collapse="isCollapse" :logo-text-show="logoTextShow" ></Aside>
      </el-aside>
      <el-container>
        <el-header style="border-bottom: 1px solid #ccc;">
            <Header :collapse-btn-class="collapseBtnClass" :collapse="collapse"></Header>
        </el-header>
        <el-main style="padding-top: 0">
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Aside from "@/components/Aside";
import Header from "@/components/Header";
export default {
  data() {
    return {
      collapseBtnClass: "el-icon-s-fold",
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
    }
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.sideWidth = 64
        this.collapseBtnClass = "el-icon-s-unfold"
        this.logoTextShow = false
      } else {
        this.sideWidth = 200
        this.collapseBtnClass = "el-icon-s-fold"
        this.logoTextShow = true
      }
    },

  },
  components: {
    Aside,
    Header
  }

};
</script>
<style>
.el-aside {
  transition: width 0.3s;
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  -webkit-transition: width 0.3s;
  -o-transition: width 0.3s;
}
</style>
